<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-26 10:39:30
 *@描述: 医院优势
!-->
<template>
	<div class="page-tile-7">
		<div class="page-tile-7-left">
			<div
				class="page-tile-7-left-echarts"
				ref="pageTitle7TopEchartsRefs"
			></div>
			<div class="page-tile-7-left-card">
				{{ card1Txt }}共覆盖
				<span class="color-tips">{{ card1.text1 }}个MDC</span>
				大类，病例主要集中在
				<span class="color-tips">{{ card1.text2 }}</span>
			</div>
		</div>
		<div class="page-tile-7-right">
			<formList
				:formParameter="formParameter"
				:data_list="data_list"
			/>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList'
export default {
	// 组件名称
	name: 'pageTile7',
	// 组件参数 接收来自父组件的数据
	props: {},
	// 局部注册的组件
	components: {
		formList
	},
	// 组件状态值
	data () {
		return {
			card1Txt: "",
			card1: {},
			data_list: [],
			formParameter: [{ width: '30%', title: "MDC" }, { width: '10%', title: "CMI" }, { width: '20%', title: "DRG病组数" }, { width: '20%', title: "入组病例数" }, { width: '20%', title: "平均住院天数" }]
		}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {
		init (data, typeValue) {
			if (typeValue === "非全院") {
				this.card1Txt = "我科";
			} else {
				this.card1Txt = "我院";
			}
			let data_list = data.data_list;
			let desc = data.desc;
			//图表
			this.echartsInit(data_list);
			//内容
			this.cardData(desc);
		},
		//图表
		echartsInit (data_list) {
			this.data_list = data_list;
			let myChart = echarts.init(this.$refs.pageTitle7TopEchartsRefs);
			let option;
			option = {
				title: {
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {

					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					axisLabel: {
						formatter: '{value}%'
					}
				},
				yAxis: {
					type: 'category',
					data: [],
					inverse: true,
					axisLabel: {
						show: true,
						fontSize: 18,
						color: '#8e8e8e'
					},

				},
				series: [
					{
						name: '入组率',
						type: 'bar',
						data: [],
						realtimeSort: true,
						label: {
							show: true,
							color: '#8e8e8e',
							fontSize: 18,
							position: 'right',
							formatter: '{c}%'
						}
					},
				]
			};
			data_list.forEach(item => {
				option.series[0].data.push(item['入组率']);
				option.yAxis.data.push(item['MDC']);
			})
			option && myChart.setOption(option);
		},
		//卡片内容
		cardData (desc) {
			this.card1 = {
				text1: desc['MDC数'],
				text2: desc['病例分布'],
			}
		}
	},
	created () {
	},
	mounted () {
	},
}
</script>

<style lang="less" scoped>
	.page-tile-7 {
		display: flex;
		height: 100%;
		.page-tile-7-left {
			width: 60%;
			height: 100%;
			.page-tile-7-left-echarts {
				height: 90%;
			}
			.page-tile-7-left-card {
				margin: 0 20px;
				padding: 2%;
				display: flex;
				align-items: center;
				font-size: 1.7rem;
				height: 10%;
				line-height: 80px;
				background: #fff2ca;
				border-radius: 16px;
				border: 1px solid #000;
				.color-tips {
					color: #ff1310;
				}
			}
		}
		.page-tile-7-right {
			width: 40%;
		}
	}
</style>
